$c85: rgba(0, 0, 0, 0.85);
$c65: rgba(0, 0, 0, 0.65);
.data-dic {
	width: 100%;
	padding: 20px;
	background-color: #f0f2f5;
}

.d-container {
	width: 1230px;
	// height: 900px;
	margin: 0 auto;
	padding: 30px 40px;
	background-color: #fff;
	header {
		padding-bottom: 10px;
		> p {
			font-weight: 650;
			font-size: 20px;
			color: $c85;
			line-height: 28px;
		}
	}
	.d-content {
		margin-top: 20px;
		display: flex;
		.left {
			table {
				width: 275px;
				height: 226px;
				border: 2px solid #e8e8e8;
				border-radius: 4px;
				box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.2);
				// border-collapse: collapse;
				tr {
					th {
						padding: 0 20px;
						height: 50px;
						border-bottom: 2px solid #e8e8e8;
						text-align: left;
						font-size: 18px;
						color: #262626;
					}
					td {
						ul {
							margin-left: 35px;
							list-style: circle;
							// list-style: disc;
							color: #595959;
						}
					}
				}
			}
		}
		.right {
			margin-left: 15px;
			.table-out {
				width: 850px;
				height: 420px;
				border: 2px solid #e8e8e8;
				border-radius: 4px;
				box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.2);
				// border-collapse: collapse;
				tr {
					th {
						padding: 0 20px;
						height: 50px;
						border-bottom: 2px solid #e8e8e8;
						text-align: left;
						font-size: 18px;
						color: #262626;
					}
					td {
						padding: 10px;
						.page {
							margin-top: 30px;
							text-align: right;
						}
					}
				}
			}
			.table-inner {
				width: 100%;
				height: 260px;
				// border: 2px solid #e8e8e8;
				border-radius: 4px;
				box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.2);
				// border-collapse: collapse;
				tr {
					th {
						padding: 0 10px;
						height: 50px;
						border-bottom: 2px solid #e8e8e8;
						text-align: left;
						color: #262626;
						background-color: #fafafa;
						.a {
							font-size: 18px;
							color: #262626;
							font-weight: 600;
						}
					}
					td {
						// padding: 10px;
						border-bottom: 1px solid #e8e8e8;
						color: #595959;
						&:nth-of-type(1) {
							width: 130px;
						}
					}
				}
			}
		}
	}
}

// 新增角色 弹窗界面
.add-role {
	.ar-container {
		height: 600px;
		> p {
			position: relative;
			color: #43a493;
			font-size: 14px;
			font-weight: 600;
			line-height: 50px;
			border-bottom: 1px solid #d4d4d4;
			padding-left: 10px;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 90px;
				height: 2px;
				background-color: #43a493;
			}
		}
		> section {
			margin-top: 20px;
			> div {
				width: 300px;
			}
			.two {
				margin-top: 20px;
				position: relative;
				.select {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
				}
			}
		}
	}
}

.role-msg {
	height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
	> aside {
		padding: 0 20px;
		.collapse {
			padding: 20px 0;
			.one {
				header {
					line-height: 35px;
					> span {
						font-size: 18px;
						padding-right: 10px;
					}
				}
				section {
					margin-left: 24px;
					line-height: 35px;
					.two-content {
						margin-left: 45px;
						.span {
							font-size: 18px;
							padding-right: 10px;
						}
					}
				}
			}
		}
	}
}

.help {
	width: 100%;
	// height: 500px;
	background-color: #f0f2f5;
	padding: 20px;
	main {
		height: 100%;
		line-height: 40px;
		background-color: #fff;
		header {
			position: relative;
			display: flex;
			margin-left: 20px;
			span {
				font-weight: 650;
				font-size: 24px;
				color: $c85;
			}
			.two {
				margin-left: 13px;
			}
			.one {
				display: block;
				width: 24px;
				height: 24px;
				line-height: 24px;
				border-radius: 50%;
				margin-top: 7px;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 14px;
				font-weight: 400;
			}
			a {
				position: absolute;
				top: 0px;
				left: 480px;
				color: #6699ff;
			}
		}
		section {
			margin-left: 65px;
			position: relative;
			ol {
				li {
					position: relative;
					p {
						color: $c65;
					}
					&::after {
						content: '';
						position: absolute;
						top: 17px;
						left: -37px;
						width: 7px;
						height: 7px;
						background-color: #000;
						border-radius: 50%;
					}
					> div {
						width: 510px;
						line-height: 20px;
						color: $c65;
					}
					.p {
						color: rgba(0, 0, 0, 0.85);
					}
				}
			}
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: -35px;
				width: 2px;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.65);
			}
		}
	}
}

// 首页
.home-view {
	// 盒子水平垂直居中的几种方式
	// 第一种，定位＋margin
	// .box {
	//     position: relative;
	//     width: 300px;
	//     height: 300px;
	//     background-color: aqua;
	//     .son-box {
	//         position: absolute;
	//         top: 50%;
	//         left: 50%;
	//         width: 100px;
	//         height: 100px;
	//         // 注意：margin中不能用百分比，必须写像素，在确定子元素的宽高的的时候使用。
	//         // margin-left: -50%;
	//         // margin-top: -50%;
	//         margin-left: -50px;
	//         margin-top: -50px;
	//         background-color: aquamarine;
	//     }
	// }
	// 第二种 定位＋2d转换，可以不用知道盒子的宽高
	.box {
		position: relative;
		width: 300px;
		height: 300px;
		background-color: aqua;
		.son-box {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100px;
			height: 100px;
			transform: translate(-50%, -50%);
			background-color: aquamarine;
		}
	}
	// 第三中，flex布局
	.box-flex {
		display: flex;
		flex-wrap: wrap;
		// 控制元素在主轴上的对齐方式
		justify-content: flex-start;
		// 控制单行元素在侧轴上的对齐方式
		align-items: center;
		// 控制多行元素在侧轴上的对齐方式
		align-content: flex-start;
		width: 300px;
		height: 500px;
		background-color: aqua;
		margin-top: 10px;
		.item {
			width: 80px;
			height: 80px;
			margin-top: 10px;
			margin-left: 14px;
			background-color: aquamarine;
		}
	}
	// 图片悬浮缩放的2d转换
	.scale {
		width: 460px;
		height: 280px;
		overflow: hidden;
		border: 1px solid cyan;
		img {
			width: 100%;
			transition: all 0.4s linear;
			&:hover {
				transform: scale(1.1);
			}
		}
	}
	.animation {
		width: 120px;
		height: 120px;
		background-color: greenyellow;
		animation: demo1 2s ease infinite alternate;
		// animation-delay: ;
		&:hover {
			animation-play-state: paused;
		}
	}
	@keyframes demo1 {
		0% {
			transform: translate(-100px, 0);
		}
		100% {
			transform: translate(100px, 0);
		}
		// 0% {}
		// 25% {}
		// 50% {}
		// 100%{
		// }
	}
	> div {
		width: 1150px;
		height: 700px;
		background-color: #f0f2f5;
	}
	main {
		display: flex;
		// justify-content: space-around;
		flex-wrap: wrap;
		padding: 0 30px;
		> div {
			width: 320px;
			height: 184px;
			border-radius: 4px;
			background-color: #fff;
			margin-top: 40px;
			margin-left: 58px;
			&:nth-child(3n + 1) {
				margin-left: 0px;
			}
		}
		.add {
			border: 1px dashed rgba(0, 0, 0, 0.43);
			background-color: #f0f2f5;
			text-align: center;
			line-height: 184px;
			color: rgba(0, 0, 0, 0.43);
			cursor: pointer;
		}
		.data-item {
			display: flex;
			flex-direction: column;
			box-shadow: 4px 4px 5px rgba(#999, 0.2);
			cursor: pointer;
			transition: all 0.4s ease;
			&:hover {
				transform: translateY(-2px);
				box-shadow: 0px 4px 10px rgba(#000, 0.2);
			}
			.t {
				flex: 1;
				display: flex;
				.t-l {
					width: 90px;
					text-align: center;
					img {
						width: 74px;
						margin-top: 18px;
					}
				}
				.t-r {
					flex: 1;
					margin-top: 20px;
					font-size: 16px;
					color: $c85;
					font-weight: 650;
					> p {
						padding-left: 20px;
					}
					> div {
						display: flex;
						margin-top: 10px;
						height: 60px;
						.b {
							position: relative;
							&::after {
								content: '';
								position: absolute;
								top: 10px;
								right: 0;
								width: 1px;
								height: 50px;
								background-color: #ccc;
							}
						}
						.normal {
							background-color: #43a493;
						}
						.zwc {
							color: rgba(255, 153, 102, 0.42) !important;
						}
						.gwc {
							color: #f00 !important;
						}
						.zw {
							background-color: rgba(255, 153, 102, 0.42);
						}
						.gw {
							background-color: #f00;
						}
						.status {
							flex: 1;
							text-align: center;
							> p:nth-child(1) {
								position: relative;
								color: rgba(0, 0, 0, 0.43);
								font-size: 12px;
								line-height: 34px;
								span {
									display: block;
									position: absolute;
									top: 14px;
									left: 10px;
									width: 5px;
									height: 5px;
									border-radius: 50%;
								}
							}
							> p:nth-child(2) {
								font-size: 24px;
								color: $c65;
								line-height: 32px;
							}
						}
					}
				}
			}
			.f {
				display: flex;
				width: 100%;
				height: 48px;
				border-top: 1px solid rgb(233, 233, 233);
				background-color: rgba(247, 249, 250, 1);
				border-radius: 0px 0px 4px 4px;
				img {
					width: 30px;
					vertical-align: middle;
				}
				> div {
					flex: 1;
					line-height: 48px;
					text-align: center;
					// justify-content: center;
				}
				.mid {
					position: relative;
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						width: 1px;
						height: 16px;
						background-color: rgb(233, 233, 233);
					}
				}
			}
		}
	}
}
